<template>
  <div>
    <div class="page_title">申请管理</div>
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick"
      style="background:white;border-radius: 5px;">
      <el-tab-pane label="认证申请" name="renzheng">
        <FormTable :name="table.name" :tableButton="table.button" :formRules="formRules" :tableData="table.tableData"
          :columns="table.columns" :total="total" :currentPage="queryParams.pageNum" :pageSize="queryParams.pageSize"
          @changeTableData="changeTableData" @tableButtonClick="startSq" @queryTable="queryTable">
          <template #check="{ slotProps }">
            <el-tag class="ml-2" :type="slotProps.check ? 'success' : 'danger'">
              {{ checkFilter(slotProps.check) }}
            </el-tag>
          </template>
          <template #operator="{ slotProps }">
            <span class="table_button" @click="goToDetail(slotProps)">查看</span>
            <el-divider direction="vertical" />
            <span class="table_button" @click="setData('edit', slotProps)">编辑</span>
            <el-divider direction="vertical" />
            <span class="table_button" @click="setData('edit', slotProps)">撤销</span>
          </template>
        </FormTable>
      </el-tab-pane>
      <el-tab-pane label="验收申请" name="yanshou"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script name="list-two" setup>
import FormTable from "@/components/FormTable/index.vue";
import { useRouter } from "vue-router";
import { queryRzsqList } from '@/api/rzsq'
const router = useRouter();
const activeTab = ref('renzheng')
let total = ref(0);
//{"field":"centreName","data":"核电","opType":"Equals"}
let queryParams = reactive({ pageNum: 1, pageSize: 10, groups: [], rules: [], orderBys: [] })
onMounted(() => {
  getList()
})
function getList() {
  queryRzsqList(queryParams).then(res => {
    if (res.code == "0") {
      table.tableData = res.data.list
      total.value = res.data.total
    }
  })
}
function queryTable(params) {
  let rules = []
  for (let key in params) {
    let val = params[key]
    val && rules.push(
      {
        field: key,
        data: val,
        opType: "Contains"
      }
    )
  }
  queryParams.rules = rules
  getList()
}
function changeTableData(pageNum,pageSize){
  queryParams.pageNum = pageNum
  queryParams.pageSize = pageSize
  getList()
}
// 发起申请
const startSq = () => {
  router.push({ path: "/rzsq/apply" });
}
const goToDetail = (prop) => {
  router.push({ path: "/rzsq/detail", query: { tab: 'shenqing',id : prop.id} });
}
const table = reactive({
  tableData: [],
  name: '参建单位名单列表',
  button: '发起申请',
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "申请单位",
      prop: "applicant",
    },
    {
      label: "申请日期",
      prop: "applicantDate",
    },
    {
      label: "申请单位名称",
      prop: "applicantName",
    },
    {
      label: "当前节点",
      prop: "email",
    },
    {
      label: "当前状态",
      prop: "email",
    },
    {
      label: "联系人",
      prop: "contact",
    },
    {
      label: "联系电话",
      prop: "contactNumber",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
      width: '160px'
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
const formRules = ref([
  {
    type: "input",
    field: "applicant",
    title: "申请单位",
    value: "",
  },
  {
    type: "datePicker",
    field: "applicantDate",
    title: "申请日期",
    value: "",
  },
  {
    type: "input",
    field: "applicantName",
    title: "申请单位名称",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "当前节点",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "当前状态",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系人",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系电话",
    value: "",
  },
]);
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  padding-left: 12px !important;
}

::v-deep .el-tabs__header {
  margin: 0 !important
}
</style>
